<script setup lang="ts">
import { OrderPaymentTypeInfo } from '@/api/wuliu';
import { Search } from '@element-plus/icons-vue';

const detailVisible = ref(false);
const moreDetailVisible = ref(false);

const detailListData = ref<any>([]);
const mxData = ref<any>();
const mxDataImages = computed(() => {
  const urlList = mxData.value?.photourl;
  return urlList ? JSON.parse(urlList) : [];
});

function handleOpen(list: any[]) {
  detailListData.value = list;
  detailVisible.value = true;
}

function handleOpenMx(mx: any) {
  console.log('mxData', mxData);
  mxData.value = mx;
  moreDetailVisible.value = true;
}

defineExpose({
  handleOpen
});
</script>

<template>
  <el-drawer v-model="detailVisible" title="订单明细" direction="rtl" size="55%">
    <el-table :data="detailListData">
      <el-table-column prop="customName" label="收货人" />
      <el-table-column prop="priceSum" label="件数">
        <template #default="{ row }"> {{ row.number }}件 </template>
      </el-table-column>
      <el-table-column prop="priceSum" label="方数">
        <template #default="{ row }"> {{ row.area }}m³ </template>
      </el-table-column>
      <el-table-column prop="priceSum" label="单价">
        <template #default="{ row }"> ￥{{ row.univalence }} </template>
      </el-table-column>
      <el-table-column prop="priceSum" label="总价">
        <template #default="{ row }"> ￥{{ row.totalPrice }} </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button :icon="Search" type="primary" size="small" text @click="handleOpenMx(row)"> 查看 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>

  <el-drawer v-model="moreDetailVisible" title="详情" direction="rtl" size="50%">
    <el-descriptions v-if="mxData" :column="2" direction="vertical" border>
      <el-descriptions-item label="收货人"> {{ mxData.customName }} </el-descriptions-item>
      <el-descriptions-item label="件数"> {{ mxData.number }}件 </el-descriptions-item>
      <el-descriptions-item label="方数"> {{ mxData.area }}m³ </el-descriptions-item>
      <el-descriptions-item label="单价"> ￥{{ mxData.univalence }} </el-descriptions-item>
      <el-descriptions-item label="总价"> ￥{{ mxData.totalPrice }} </el-descriptions-item>
      <el-descriptions-item label="付款方式"> {{ OrderPaymentTypeInfo[mxData.paymentMethod] }} </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2"> {{ mxData.remark }} </el-descriptions-item>
      <el-descriptions-item label="照片" :span="2">
        <el-image
          v-for="(url, index) in mxDataImages"
          :key="url"
          :style="{ width: '200px' }"
          :src="url"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="mxDataImages"
          :initial-index="index"
          fit="cover"
        />
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<style lang="scss"></style>
